// 五秒跳过按钮
import React, { useState, useEffect } from 'react';  

const SkipButton: React.FC = () => {  
    const [count, setCount] = useState<number>(5);  
    const [isCounting, setIsCounting] = useState<boolean>(false);  
    
    useEffect(() => {  
        let timer: NodeJS.Timeout | null = null;  

        if (isCounting && count > 0) {  
            timer = setInterval(() => {  
                setCount((prevCount) => prevCount - 1);  
            }, 1000);  
        } else if (count === 0) {  
            clearInterval(timer!);  
            handleSkip();  // 时间到后调用跳过事件  
        }  

        return () => {  
            if (timer) {  
                clearInterval(timer);  
            }  
        };  
    }, [isCounting, count]);  

    const handleStartCountdown = () => {  
        setIsCounting(true);  
    };  

    const handleSkip = () => {  
        // 这里添加跳过逻辑，例如跳转到主界面  
        console.log("跳过启动页");  
        // 你可以使用 React Router 的 history.push('/home') 来路由跳转  
    };  

    // 在组件挂载时开始倒计时  
    useEffect(() => {  
        handleStartCountdown();  
    }, []);  
    
    return (  
        <div style={styles.container as React.CSSProperties}>  
            <button   
                onClick={handleSkip}   
                disabled={isCounting}  
                style={styles.skipButton}  
            >  
                跳过 {isCounting ? `${count}s` : ''}  
            </button>  
        </div>  
    );  
};  

const styles = {  
    container: {  
        position: 'absolute',  
        right: '20px',  
        top: '20px',  
        zIndex: 1000,  
    },  
    skipButton: {  
        padding: '10px 15px',  
        backgroundColor: '#f0f0f0',  
        border: 'none',  
        borderRadius: '5px',  
        cursor: 'pointer',  
        fontSize: '16px',  
    }  
};  

export default SkipButton; 